<template>
  <Wrapper>
    <el-alert type="warning" effect="dark" :closable="false"
      >全局开始模糊背景后，无论是否传入isBlur都会跟随全局配置生效，想不跟随生效传入followConfigBlur为false即可</el-alert
    >
    <el-card shadow="never" header="Modal组件" class="card-box">
      <el-space wrap>
        <el-button @click="isShow1 = true">普通的</el-button>
        <el-button @click="isShow2 = true">直接全屏</el-button>
        <el-button @click="isShow3 = true">可拖拽</el-button>
        <el-button @click="isShow4 = true">拖拽超出可视区</el-button>
        <el-button @click="isShow5 = true">没有全屏按钮</el-button>
        <el-button @click="isShow6 = true">没有关闭按钮</el-button>
        <el-button @click="isShow7 = true">模糊背景</el-button>
        <el-button @click="isShow8 = true">模糊背景不跟随全局配置</el-button>
      </el-space>
    </el-card>

    <el-card shadow="never" header="命令式调用" class="card-box">
      <el-button @click="openDialog">打开</el-button>
    </el-card>

    <el-card shadow="never" header="" class="card-box">
      <template #header>
        <el-space>
          <span>Drawer组件</span>
          <el-tag type="primary">用法同el-dialog</el-tag>
        </el-space>
      </template>
      <el-space wrap>
        <el-button @click="drawer1 = true">普通的</el-button>
        <el-button @click="drawer2 = true">自定义header</el-button>
        <el-button @click="drawer3 = true">自定义内容</el-button>
        <el-button @click="drawer4 = true">模糊背景</el-button>
        <el-button @click="drawer5 = true">模糊背景不跟随全局配置</el-button>
      </el-space>
    </el-card>

    <el-card
      shadow="never"
      header="分段控制器"
      class="card-box"
      :body-style="{ display: 'flex', flexDirection: 'column' }"
    >
      <el-radio-group v-model="size">
        <el-radio value="default">默认</el-radio>
        <el-radio value="small">小</el-radio>
        <el-radio value="large">大</el-radio>
      </el-radio-group>
      <div class="segmented-box">
        <span>基本用法</span>
        <segmented
          v-model="value"
          :size="size"
          :options="[
            { label: '选项1', value: 1 },
            { label: '选项2', value: 2 },
            { label: '选项3', value: 3 },
          ]"
          @change="handleChange"
        />
      </div>
      <div class="segmented-box">
        <span>添加icon</span>
        <segmented
          v-model="value"
          :size="size"
          :options="[
            { label: '选项1', value: 1, icon: 'Search' },
            { label: '选项2', value: 2 },
            {
              label: '选项3',
              value: 3,
              icon: 'alipay',
              iconType: ICON_TYPE.SVG,
            },
          ]"
          @change="handleChange"
        />
      </div>
      <div class="segmented-box">
        <span>部分禁用</span>
        <segmented
          v-model="value"
          :size="size"
          :options="[
            { label: '选项1', value: 1, disabled: true },
            { label: '选项2', value: 2 },
            { label: '选项3', value: 3 },
          ]"
          @change="handleChange"
        />
      </div>
      <div class="segmented-box">
        <span>全部禁用</span>
        <segmented
          v-model="value"
          disabled
          :size="size"
          :options="[
            { label: '选项1', value: 1 },
            { label: '选项2', value: 2 },
            { label: '选项3', value: 3 },
          ]"
          @change="handleChange"
        />
      </div>
      <div class="segmented-box">
        <span>block</span>
        <segmented
          v-model="value"
          block
          :size="size"
          :options="[
            { label: '选项1', value: 1 },
            { label: '选项2', value: 2 },
            { label: '选项3', value: 3 },
          ]"
          @change="handleChange"
        />
      </div>
      <div class="segmented-box">
        <span>只有icon</span>
        <segmented
          v-model="value"
          :size="size"
          :options="[
            { icon: 'alipay', iconType: ICON_TYPE.SVG },
            { icon: 'Search' },
            { icon: 'Lock' },
          ]"
          @change="handleChange"
        />
      </div>
    </el-card>

    <el-card header="b站按钮点击效果" shadow="never" class="card-box">
      <button
        class="bilibili-button"
        @mousedown="handleMouseDown"
        @mouseup="handleMouseUp"
        @mouseleave="handleMouseUp"
      >
        点击一下看看
      </button>
    </el-card>

    <modal v-model="isShow1" title="普通的" />
    <modal v-model="isShow2" title="直接全屏" fullscreen />
    <modal v-model="isShow3" title="可拖拽" draggable />
    <modal v-model="isShow4" title="拖拽超出可视区" draggable overflow />
    <modal v-model="isShow5" title="没有全屏按钮" :show-fullscreen="false" />
    <modal v-model="isShow6" title="没有关闭按钮" :show-close="false" />
    <modal v-model="isShow7" title="模糊背景" is-blur />
    <modal
      v-model="isShow8"
      :follow-config-blur="false"
      title="模糊背景不跟随全局配置生效"
    />

    <drawer v-model="drawer1" title="普通的" />
    <drawer v-model="drawer2">
      <template #header>
        <el-button type="primary">我是自定义的header</el-button>
      </template>
    </drawer>
    <drawer v-model="drawer3" title="自定义content">
      中分头，背带裤，我是ikun你记住
    </drawer>
    <drawer v-model="drawer4" is-blur title="模糊背景" />
    <drawer
      v-model="drawer5"
      :follow-config-blur="false"
      title="模糊背景不跟随全局配置生效"
    />
  </Wrapper>
</template>

<script setup>
import { ICON_TYPE } from '@/const'
import renderDialog2 from '@/app/dialog'
import BaseForm from './components/form'

const Modal = defineAsyncComponent(() => import('@/components/modal'))
const Drawer = defineAsyncComponent(() => import('@/components/modal/drawer'))
const segmented = defineAsyncComponent(() => import('@/components/segmented'))

const value = ref(2)
const isShow1 = ref(false)
const isShow2 = ref(false)
const isShow3 = ref(false)
const isShow4 = ref(false)
const isShow5 = ref(false)
const isShow6 = ref(false)
const isShow7 = ref(false)
const isShow8 = ref(false)
const drawer1 = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const drawer4 = ref(false)
const drawer5 = ref(false)
const isPressed = ref(false)
const size = ref('default')

function handleChange(val) {
  console.log(val)
}

function handleMouseDown() {
  isPressed.value = true
}

function handleMouseUp() {
  isPressed.value = false
}

async function openDialog() {
  renderDialog2({
    component: BaseForm,
    modalProps: { title: '这是表单title' },
    props: { title: '这是弹窗title' },
  })
}
</script>

<style scoped>
.segmented-box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;

  span {
    display: inline-block;
    width: 100px;
  }
}

.bilibili-button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #ff4d4f; /* Bilibili button color */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
  outline: none;
}

.bilibili-button:active {
  transform: scale(0.95); /* Scale down when pressed */
  background-color: #e03e3e;
}
</style>
